<template>
  <el-dialog
    width="80%"
    :title="'新增处方'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      label-width="110px"
    >
      <el-form-item>
        <el-radio-group v-model="dataForm.dynamicPrescriptionIndex">
          <el-radio 
          v-for="(prescription,index) in dataForm.dynamicPrescriptions"
          :key="index"
          :prop="dataForm.dynamicPrescriptionIndex"
          :label="index"
          size="medium"
          class="inline-radio">
          <el-tag>方案{{index+1}}</el-tag>
          <el-row :gutter="20" style="margin-top: 12px">
            <el-col :span="24"><div class="text item">运动目标：{{prescription.SportTargetName}}</div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"><div class="text item">运动形式：{{prescription.SportTypeName}}</div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"><div class="text item">运动方案：</div>
            <div class="text item"
            v-for="(sportPrescription,sIndex) in prescription.SportPrescription"
            :key="sIndex">
                  第{{sIndex+1}}阶段：每次心率: {{sportPrescription.HRAvg}}，每次时长：{{sportPrescription.Duration}}分钟，
                  每周频率：{{sportPrescription.Frequency}}次，共{{sportPrescription.Week}}周
            </div> 
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24"><div class="text item">注意事项：{{prescription.note}}</div></el-col>
          </el-row>
          </el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="visible = false"
      >取消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        :disabled="this.dataForm.dynamicPrescriptions.length===0"
        @click="dataFormSubmit()"
      >确定</el-button>
    </span>
    <perscription-exceptions-confirm
      v-if="perscriptionExceptionsConfirmVisible"
      ref="perscriptionExceptionsConfirm"
      @close="editClose"
      @success="editSuccess"
    />
  </el-dialog>
</template>

<script>
import perscriptionExceptionsConfirm from './perscriptionExceptions-confirm'
  export default {
  components: { perscriptionExceptionsConfirm },
    data () {
      return {
        visible: false,
        loading: false,
        dataList: [],
        dataListLoading: false,
        perscriptionExceptionsConfirmVisible: false,
        dataForm: {
          dynamicPrescriptions: [] /*[
              {
                  "SportType": "跳绳",// 运动目标
                  "SportTarget": "减肥",// 运动方式
                  "note": "注意事项",
                  "SportPrescription": [ // 运动方案
                      {
                          "HRAvg": "85", // 平均心率
                          "Frequency": 4, // 每周运动次数（频率）
                          "Duration": 30, // 每次运动持续时间
                          "Phrase": 2,// 阶段
                          "ActionCount": 3, // 运动个数或次数
                          "Week": 2 // 周
                      },
                      {
                          "HRAvg": "85", // 平均心率
                          "Frequency": 4, // 每周运动次数（频率）
                          "Duration": 30, // 每次运动持续时间
                          "Phrase": 2,// 阶段
                          "ActionCount": 3, // 运动个数或次数
                          "Week": 2 // 周
                      }
                  ]
              },
              {
                  "SportType": "跳绳",// 运动目标
                  "SportTarget": "减肥",// 运动方式
                  "note": "注意事项",
                  "SportPrescription": [ // 运动方案
                      {
                          "HRAvg": "85", // 平均心率
                          "Frequency": 4, // 每周运动次数（频率）
                          "Duration": 30, // 每次运动持续时间
                          "Phrase": 2,// 阶段
                          "ActionCount": 3, // 运动个数或次数
                          "Week": 2 // 周
                      },
                      {
                          "HRAvg": "85", // 平均心率
                          "Frequency": 4, // 每周运动次数（频率）
                          "Duration": 30, // 每次运动持续时间
                          "Phrase": 2,// 阶段
                          "ActionCount": 3, // 运动个数或次数
                          "Week": 2 // 周
                      }
                  ]
              }
          ]*/,
          dynamicPrescriptionIndex: -1
        },
        sels: []
      }
    },
    methods: {
      init () {
        this.visible = true
        /* var x = this.dataForm.dynamicPrescriptions.pop();
        var that = this;
        setTimeout(function(){
          that.dataForm.dynamicPrescriptions.push(x);
        }, 2000) */
        this.$http({
          url: this.$http.requestUrl('/sport/prescriptionapi/query/api'),
          method: 'post',
          /* params: this.$http.requestParams() */
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.dynamicPrescriptions = this.transformDate(data);
          }
        })
      },
      transformDate(data) {
        data =  JSON.parse(data.info);
        var newData = [];
        var prescriptions = data.SportPrescription;
        for(var i in prescriptions) {
          var item = prescriptions[i];
          var newItem = {
            SportType: item.SportType,
            SportTypeName: item.SportTypeName,
            SportTarget: data.SportTarget,
            SportTargetName: data.SportTargetName,
            note: item.note,
            SportPrescription: item.Options
          };
          newData.push(newItem);
        }
        return newData;
      },
      selsChange (sels) {
        this.sels = sels
      },
      editClose() {
        this.visible = false
        this.$emit('close')
      },
      editSuccess() {
        this.visible = false
        this.$emit('success')
      },
      dataFormSubmit () {
        if (this.dataForm.dynamicPrescriptionIndex == -1) {
            this.$message({
              message: '请选择一个方案',
            })
            return
        }
        for(var i in this.dataForm.dynamicPrescriptions) {
          if(this.dataForm.dynamicPrescriptionIndex == i) {
            this.dataForm.dynamicPrescriptions[i].status = '1';
          } else {
            this.dataForm.dynamicPrescriptions[i].status = '0';
          }
        }
        this.perscriptionExceptionsConfirmVisible = true
        this.$nextTick(() => {
          this.$refs.perscriptionExceptionsConfirm.init(this.dataForm)
        })
        /*this.$http({
          url: this.$http.requestUrl('/sport/prescriptionapi/save/api'),
          method: 'post',
          data: JSON.stringify(this.dataForm.dynamicPrescriptions)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
              }
            })
          }
        })*/
        /* var sportProject = this.sels.map(item => item.sportProject).toString()
        var sportDuration = this.sels.map(item => item.sportDuration).toString()
        var sportFrequency = this.sels.map(item => item.sportFrequency).toString()
        var sportIntensity = this.sels.map(item => item.sportIntensity).toString()
        this.perscriptionExceptionsConfirmVisible = true
        this.$nextTick(() => {
          this.$refs.perscriptionExceptionsConfirm.init(sportProject, sportDuration, sportFrequency, sportIntensity)
        }) */
      },
      getDataList (isReload) {
        console.log(isReload)
        this.$parent.getDataList(isReload)
      },
      closeByChild() {
        console.log('close parent')
        this.visible = false
        this.$emit('close')
      }
    }
  }
</script>
<style scoped>
  .text {
    font-size: 14px;
  }
  .item {
    padding: 12px 2px;
    word-break: break-all;
    overflow: auto;
    /* border-radius: 4px;
    border: 1px solid #ebeef5; */
    border-top: 1px solid #ebeef5;
  }
  .inline-radio {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    width: 100%;
    padding: 12px;
    max-width: 1000px;
  }
  /* .inline-radio span {
    float: right;
  } */
</style>
